import React from 'react';
import BpmnViewer from 'bpmn-js/lib/NavigatedViewer';
import { message, Card } from 'antd';
import 'bpmn-js/dist/assets/diagram-js.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
import 'assets/css/bpmn.css';

export default class ProcessViewer extends React.Component {
  componentDidUpdate(prevPros) {
    const { dataSource, setChosenId } = this.props;
    if (prevPros.dataSource !== dataSource) {
      const viewer = new BpmnViewer({
        container: '#canvas',
      });


      viewer.importXML(dataSource, (err) => {
        if (err) {
          message.error('error rendering', err);
        } else {
          const canvas = viewer.get('canvas');
          // zoom to fit full viewport
          canvas.zoom('fit-viewport');
        }
      });
      const eventBus = viewer.get('eventBus');
      eventBus.on('element.click', (e) => {
        if (e.element.type === 'bpmn:Task') {
          console.warn(e.element.id);
          // 向chart组件传递服务id
          setChosenId(e.element.id);
          // 锚点跳转
          window.location.href = '#form';
        }
      });
    }
  }


  render() {
    const { name } = this.props;
    return (
      <Card style={{ margin: '20px' }} hoverable title={name}>
        <div id="canvas" style={{ height: '350px', marginBottom: '20px' }} />
      </Card>
    );
  }
}
